// BUTTON STYLES
// -------------


// Base styles
// --------------------------------------------------

// Core
.btn {
	display: inline-block;
	padding: 4px 10px 4px;
	font-size: @baseFontSize;
	line-height: @baseLineHeight - 1;
	color: @grayDark;
	text-align: center;
	text-shadow: 0 1px 1px rgba(255,255,255,.75);
	#gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
	border: 1px solid #ccc;
	border-bottom-color: #bbb;
	.border-radius(4px);
	@shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
	.box-shadow(@shadow);
	cursor: pointer;

	// Give IE7 some love
	.ie7-restore-left-whitespace();
}

// Hover state
.btn:hover {
	color: @grayDark;
	text-decoration: none;
	background-color: darken(@white, 10%);
	background-position: 0 -15px;

	// transition is only when going to hover, otherwise the background
	// behind the gradient (there for IE<=9 fallback) gets mismatched
	.transition(background-position .1s linear);
}

// Focus state for keyboard and accessibility
.btn:focus {
	.tab-focus();
}

// Active state
.btn.active,
.btn:active {
	background-image: none;
	@shadow: inset 0 2px 4px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.05);
	.box-shadow(@shadow);
	background-color: darken(@white, 5%);
	background-color: darken(@white, 15%) e("\9");
	color: rgba(0,0,0,.5);
	outline: 0;
}

// Disabled state
.btn.disabled,
.btn[disabled] {
	color: #888;
	font-weight: normal;
	cursor: default;
	background-image: none;
	background-color: darken(@white, 10%);
	.opacity(65);
	.box-shadow(none);
}

.btn.btn-primary.disabled,
.btn.btn-primary[disabled] {
	color: #fff;
}


// Button Sizes
// --------------------------------------------------

// Large
.btn-large {
	padding: 9px 14px;
	font-size: @baseFontSize + 2px;
	line-height: normal;
	.border-radius(5px);
}
.btn-large .icon {
	margin-top: 1px;
}

// Small
.btn-small {
	padding: 5px 9px;
	font-size: @baseFontSize - 2px;
	line-height: @baseLineHeight - 2px;
}
.btn-small .icon {
	margin-top: -1px;
}


// Alternate buttons
// --------------------------------------------------

// Set text color
// -------------------------
.btn-primary,
.btn-primary:hover,
.btn-warning,
.btn-warning:hover,
.btn-danger,
.btn-danger:hover,
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover {
	text-shadow: 0 -1px 0 rgba(0,0,0,.25);
	color: @white
}
// Provide *some* extra contrast for those who can get it
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active {
	color: rgba(255,255,255,.75);
}

// Set the backgrounds
// -------------------------
.btn-primary {
	background-color: @primaryButtonBackground;
	.buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
}
// Warning appears are orange
.btn-warning {
	.buttonBackground(lighten(@orange, 15%), @orange);
}
// Danger and error appear as red
.btn-danger {
	.buttonBackground(#ee5f5b, #bd362f);
}
// Success appears as green
.btn-success {
	.buttonBackground(#62c462, #51a351);
}
// Info appears as a neutral blue
.btn-info {
	.buttonBackground(#5bc0de, #2f96b4);
}


// Cross-browser Jank
// --------------------------------------------------

button.btn,
input[type="submit"].btn {
	&::-moz-focus-inner {
		padding: 0;
		border: 0;
	}

	// IE7 has some default padding on button controls
	*padding-top: 2px;
	*padding-bottom: 2px;
	&.large {
		*padding-top: 7px;
		*padding-bottom: 7px;
	}
	&.small {
		*padding-top: 3px;
		*padding-bottom: 3px;
	}
}
